<template>
  <div>
    <van-nav-bar title="我的收藏" left-text="返回" left-arrow @click-left="back" />
    <!-- <div class="nocllect" v-if="$store.user.likeList.length == 0">
      <div>您没有收藏商品</div>
    </div> -->
    <div class="list">
      <router-link class="likeList"  v-for="(item,index) in $store.user.likeList" :key="item.id" :to="'/product/'+item.product_id">
        <img :src="'http://www.mianshiti.top'+item.cover" />
        <div class="name">{{item.name}}</div>
        <div class="price">￥{{item.price}}</div>
      </router-link>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      back() {
        this.$router.back()
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .list {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    height: calc(100vh - 96px);
  }

  .list .likeList {
    float: left;
    width: 50vw;
    height: 68vw;
    margin-bottom: 20px;
  }

  .list .likeList img {
    width: 50vw;
    height: 50vw;
  }

  .list .likeList .name {
    width: 50vw;
    height: 10vw;
    font-size: 3.2vw;
  }

  .list .likeList .price {
    width: 50vw;
    height: 8vw;
    color: red;
  }
  .nocllect{
    text-align: center;
  }
</style>